<template>
    <div>
        <van-nav-bar title="本地设计师"  left-arrow @click-left="onClickLeft">
            <template #right>
                <van-image
                id="right-text"
                width="20"
                height="20"
                src="/img/ss_3.png"
                />
            </template>
         </van-nav-bar>
        <div id="condition" v-if="xuan">
            <span v-for="item in xuan" :key="item">{{item}}</span>
        </div>
        <router-link to="/shejishi">
        <div id="sheji" v-for="n in 6" :key="n">
            <div>
            <van-image
            round
            width="3rem"
            height="3rem"
            src="/company/head_common.png"
            />  
            </div>
            <div id="text">
                <h4>Jingle设计</h4>
                <p>5-10元/m³ | 擅长现代简约风 北欧风 新中式风</p>
                <div>
                    <van-image
                    width="100"
                    height="100"
                    radius="10px"
                    src="/company/sheji1-1.jpg"
                    />
                    <van-image
                    width="100"
                    height="100"
                    radius="10px"
                    src="/company/sheji1-2.jpg"
                    />
                    <van-image
                    width="100"
                    height="100"
                    radius="10px"
                    src="/company/sheji1-3.jpg"
                    />
                </div>
            </div>
        </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                xuan:['现代简约','安心优选','100-299元m³','北欧','轻奢','新中式']
            }
        },
        methods:{
            onClickLeft() {
            this.$router.back();
            },
        }
    }
</script>

<style lang="scss" scoped>
#condition{
    display: flex;
    white-space:nowrap;
    overflow:hidden;
    padding: 0 5px;
    span{
        font-size: 0.8em;
        border-radius: 5px;
        background: #efefef;
        margin: 5px;
        padding: 5px ;
        &.active{
            background: #b1aeda;
            color: rgb(35, 35, 207);
        }
    }
}
#sheji{
    display: flex;
    padding: 10px 5px;
    color: #000;
    #text{
        margin-left: 10px;
        h4{
        line-height: 15px;
        margin: 0;
        text-align: left;
        }
        p{
            color: rgb(169, 167, 167);
            line-height: 10px;
            font-size: 0.8em;
        }
    }  
}
</style>